import React, { useState } from 'react'
import { Space, Table, Pagination, Button, Input, Select, Tag, Collapse, Image, Row } from 'antd';
import {
  DownOutlined
} from '@ant-design/icons';
const getRowClassName = (record, index) => {
  let className = '';
  className = index % 2 === 0 ? "oddRow" : "evenRow";
  return className
}

const columns = [
  {
    title: '设备标识',
    dataIndex: 'deviceId',
    key: 'deviceId',
    align: "center",
    width: "12%",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '设备名称',
    dataIndex: 'deviceName',
    key: 'deviceName',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '所属产品',
    dataIndex: 'product',
    key: 'product',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '所属专业',
    dataIndex: 'speciality',
    key: 'speciality',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '所属地市',
    dataIndex: 'deviceCity',
    key: 'deviceCity',
    align: "center",
    width: "12%",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '所属县区',
    dataIndex: 'deviceCounty',
    key: 'deviceCounty',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '管理单位',
    dataIndex: 'manageUnit',
    key: 'manageUnit',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '物联网卡号',
    dataIndex: 'cardNumber',
    key: 'cardNumber',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '卡状态',
    dataIndex: 'cardState',
    key: 'cardState',
    align: "center",
    render: (text) => {
      return <Tag color="cyan">{text}</Tag>
    }
  },
  {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate',
    fixed: 'right',
    align: "center",
    width: "12%",
    render: (text, item) => {
      return <Space>
        <a style={{ fontSize: "12px", }} >详情</a>

      </Space>
    }
  },
];
const data = [
  {
    key: '1',
    deviceId: '1239812891283 ',
    deviceName: "长乐区-福州市配电",
    product: '智芯融合终端',
    speciality: "配电",
    deviceCity: "福州市",
    deviceCounty: "长乐区",
    manageUnit: "长乐公司",
    cardNumber: "213131232",
    cardState: "正常",
  },
  {
    key: '2',
    deviceId: '1239812891283 ',
    deviceName: "长乐区-福州市配电",
    product: '智芯融合终端',
    speciality: "配电",
    deviceCity: "福州市",
    deviceCounty: "长乐区",
    manageUnit: "长乐公司",
    cardNumber: "213131232",
    cardState: "正常",
  },
  {
    key: '3',
    deviceId: '1239812891283 ',
    deviceName: "长乐区-福州市配电",
    product: '智芯融合终端',
    speciality: "配电",
    deviceCity: "福州市",
    deviceCounty: "长乐区",
    manageUnit: "长乐公司",
    cardNumber: "213131232",
    cardState: "正常",
  },
  {
    key: '4',
    deviceId: '1239812891283 ',
    deviceName: "长乐区-福州市配电",
    product: '智芯融合终端',
    speciality: "配电",
    deviceCity: "福州市",
    deviceCounty: "长乐区",
    manageUnit: "长乐公司",
    cardNumber: "213131232",
    cardState: "正常",
  },
  {
    key: '5',
    deviceId: '1239812891283 ',
    deviceName: "长乐区-福州市配电",
    product: '智芯融合终端',
    speciality: "配电",
    deviceCity: "福州市",
    deviceCounty: "长乐区",
    manageUnit: "长乐公司",
    cardNumber: "213131232",
    cardState: "正常",
  },
  {
    key: '6',
    deviceId: '1239812891283 ',
    deviceName: "长乐区-福州市配电",
    product: '智芯融合终端',
    speciality: "配电",
    deviceCity: "福州市",
    deviceCounty: "长乐区",
    manageUnit: "长乐公司",
    cardNumber: "213131232",
    cardState: "正常",
  },
  {
    key: '7',
    deviceId: '1239812891283 ',
    deviceName: "长乐区-福州市配电",
    product: '智芯融合终端',
    speciality: "配电",
    deviceCity: "福州市",
    deviceCounty: "长乐区",
    manageUnit: "长乐公司",
    cardNumber: "213131232",
    cardState: "正常",
  },
  {
    key: '8',
    deviceId: '1239812891283 ',
    deviceName: "长乐区-福州市配电",
    product: '智芯融合终端',
    speciality: "配电",
    deviceCity: "福州市",
    deviceCounty: "长乐区",
    manageUnit: "长乐公司",
    cardNumber: "213131232",
    cardState: "正常",
  },
  {
    key: '9',
    deviceId: '1239812891283 ',
    deviceName: "长乐区-福州市配电",
    product: '智芯融合终端',
    speciality: "配电",
    deviceCity: "福州市",
    deviceCounty: "长乐区",
    manageUnit: "长乐公司",
    cardNumber: "213131232",
    cardState: "正常",
  },
  {
    key: '10',
    deviceId: '1239812891283 ',
    deviceName: "长乐区-福州市配电",
    product: '智芯融合终端',
    speciality: "配电",
    deviceCity: "福州市",
    deviceCounty: "长乐区",
    manageUnit: "长乐公司",
    cardNumber: "213131232",
    cardState: "正常",
  },
];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    // Column configuration not to be checked
    name: record.name,
  }),
};
export default function AllDevice(props) {
  const [fileList, setFileList] = useState([]);
  const [selectionType, setSelectionType] = useState('checkbox');
  const items = [
    {
      key: '1',
      label: <Space style={{ fontSize: '12px' }} size={25}>
        <div>
          设备名称<Input placeholder="请输入" className='inputValue1' />
        </div>
        <div>
          设备标识<Input placeholder="请输入" className='inputValue1' />
        </div>
        <div>
          所属专业
          <Select
            defaultValue={"全部"}
            className='inputValue1'
            dropdownStyle={{ fontSize: "7px" }}
            options={[
              {
                value: '全部',
                label: '全部',
              },

            ]}
          />
        </div>
        <div>
          所属地市<Select
            placeholder="请选择"
            className='inputValue1'
            options={[
              {
                value: '福州市',
                label: '福州市',
              },
            ]}
          />
        </div>
        <div>
          所属县区<Select
            placeholder="请选择"
            className='inputValue1'
            options={[
              {
                value: '长乐区',
                label: '长乐区',
              },
            ]}
          />
        </div>
      </Space>,
      children:
        <Space style={{ fontSize: "12px" }} size={35}>
          <div>
            任务编号<Input placeholder="请输入" className='inputValue' />
          </div>
          <div>
            设备标识<Input placeholder="请输入" className='inputValue' />
          </div>
          <div>
            发起人<Input placeholder="请输入" className='inputValue' />
          </div>
          <div>
            所属地市
            <Select
              defaultValue="福州市"
              className='inputValue'
              disabled
              options={[
                {
                  value: '福州市',
                  label: '福州市',
                },
              ]}
              style={{ height: '30px', fontSize: "12px" }}
            />
          </div>
        </Space>,
    },
  ];
  const expandIcon = (e) => {
    return <DownOutlined />
  }
  return (
    <div style={{
      minHeight: "545px",
      // height: document.documentElement.clientHeight - 240 
    }}>
      <div style={{ display: 'flex' }}>
        <Collapse items={items} bordered={false} expandIconPosition="end" expandIcon={(e) => expandIcon(e)} style={{ flex: "1 1 900px", background: "white" }} />
        <div style={{ width: "130px", padding: "12px 0 0 0", textAlign: "right" }}>
          <Button style={{ color: "white", background: "#1FBBA9", fontSize: "12px", borderRadius: "4px" }}>查询</Button>
          <Button style={{ color: "black", fontSize: "12px", borderRadius: "4px", margin: "0 0 0 10px" }}>重置</Button>
        </div>
      </div>
      <Table
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
        rowClassName={(record, index) => getRowClassName(record, index)}
        columns={columns} dataSource={data} style={{ border: "1px solid #c9cacac7", margin: "5px 0 0 0", }}
        pagination={false}
        size='small'
      >
      </Table>
      <Pagination
        total={100}
        showTotal={(total) => `共 ${total} 条记录 第1~${total > 9 ? 10 : total} 条`}
        defaultCurrent={1}
        showSizeChanger={false}
        style={{ margin: "10px 0 0 0", fontSize: "12px" }}
      />
    </div>
  )
}
